import React, { useState } from 'react';
import './App.css';
import SummaryChart from './components/SummaryChart';
import EventCard from './components/EventCard';
import ChartSelector, { ChartData } from './components/ChartSelector';
import CreateEvent from './components/CreateEvent';
import type { EventFormData } from './components/CreateEvent';
import Heatmap from './components/Heatmap';
import EventDetail from './components/EventDetail';

function App() {
  const [selectedTimeRange, setSelectedTimeRange] = useState('7d');
  const [showCreateEvent, setShowCreateEvent] = useState(false);

  const handleEventSubmit = (eventData: EventFormData) => {
    console.log('事件提交成功:', eventData);
    // 这里可以添加实际的事件保存逻辑
  };

  // EventDetail组件示例数据
  const processOptions = ['饮食习惯养成', '运动习惯养成', '学习习惯养成'];
  const subtasks = [
    { id: 'ts1', name: '', completed: 100, total: 150 },
    { id: 'ts2', name: '', completed: 120, total: 180 },
    { id: 'ts3', name: '', completed: 180, total: 200 },
    { id: 'ts4', name: '', completed: 90, total: 150 },
    { id: 'ts5', name: '', completed: 100, total: 150 }
  ];
  const mainTasks = [
    { id: 'task1', name: '每天一苹果', completed: 150, total: 1500 }
  ];

  // 生成指定天数的图表数据
  const generateChartData = (days: number): ChartData => {
    // 生成x轴日期标签
    const xAxisData = Array.from({ length: days }, (_, i) => `${i + 1}日`);

    // 生成随机数据（实际应用中可替换为真实数据）
    const generateRandomData = (length: number) =>
      Array.from({ length }, () => Math.floor(Math.random() * 100));

    // 生成温度数据（范围15-30°C）
    const generateTempData = (length: number) =>
      Array.from({ length }, () => 15 + Math.floor(Math.random() * 15));

    return {
      xAxisData,
      evaporationData: generateRandomData(days),
      precipitationData: generateRandomData(days),
      temperatureData: generateTempData(days),
    };
  };

  // 定义不同时间范围的图表数据
  const chartDataMap: { [key: string]: ChartData } = {
    '7d': generateChartData(7),
    '30d': generateChartData(30),
    '60d': generateChartData(60),
    '90d': generateChartData(90),
  };

  // 处理时间范围变化
  const handleTimeRangeChange = (value: string) => {
    setSelectedTimeRange(value);
  };

  return (
    <div className="App">
      {/* hahahaha */}
      {/* <SummaryChart
        data={{
          radiusAxisData: ['TCR', 'ACR', 'GCR'],
          crData: [0.3, 0.4, 0.8],
        }}
      /> */}
      <button
        className="create-event-btn"
        onClick={() => setShowCreateEvent(true)}
      >
        +
      </button>

      {/* <EventCard
        eventName="每天一苹果"
        info="DPSO 150"
        startTime="12:10"
        endTime="13:10"
        trackingText="Tracking"
        notes="这里写一些备注提醒"
      /> */}

      {/* <ChartSelector
        options={[
          { value: '7d', label: '最近7天' },
          { value: '30d', label: '最近30天' },
          { value: '60d', label: '最近60天' },
          { value: '90d', label: '最近90天' },
        ]}
        defaultValue="7d"
        onChange={handleTimeRangeChange}
        chartData={chartDataMap[selectedTimeRange]}
      /> */}
      {/* <CreateEvent
        visible={showCreateEvent}
        onClose={() => setShowCreateEvent(false)}
        onSubmit={handleEventSubmit}
      /> */}
      
        <div className="heatmap-container">
          <EventDetail
          title="每天一苹果"
          timeRange="12:10 - 13:10"
          dpValue="DP50 150"
          remark="这里写一些备注提醒"
          totalTasks={1200}
          dailyTasks={150}
          processName="饮食习惯养成"
          processOptions={processOptions}
          subtasks={subtasks}
          mainTasks={mainTasks}
          x={50}
          y={50}
          width={400}
          height="auto"
        />
        <Heatmap
                id="gantt-chart-1"
                config={{
                  rows: 7,
                  cols: 23,
                  rounded: 4,
                  gap: 2,
                  maxValue: 10,
                  lowColor: '#f3f4f6',
                  highColor: '#ef4444',
                }}
          />
        </div>

    </div>
  );
}

export default App;
